<template>
	<view class="page-fade-in" :style="{opacity: pageOpc}">
		<template v-if="pageOpc">
			<view class="content">
				<video-swiper :ad-list="bannerList" v-if="isShow" ref="mySwiper"></video-swiper>
				<view class="shop-info">
					<view class="info-top flexWrapNo">
						<view class="shop-img">
							<image :src="shopImg"></image>
							<view class="shop-status" :class="{'repair-status':storeInfo.store_status_data!='business'}">
								<block v-if="storeInfo.store_status_data=='business'">营业中</block>
								<block v-else-if="storeInfo.store_status_data=='rest'">休息中</block>
								<block v-else>筹备中</block>
							</view>
						</view>
						<view class="shop-name-box" @tap="navigation()">
							<view class="shop-name flexWrap">
								{{storeInfo.shop_name||'--'}}
								<view class="opera-box">
									<image src="../static/home/collect-icon.png" class="opera-icon" @tap.stop="collectStore()"></image>
									<image src="../static/home/call-icon.png" class="opera-icon" @tap.stop="makePhoneCall()"></image>
								</view>
							</view>
							<view class="address-info">
								{{storeInfo.location||'加载中...'}}
							</view>
						</view>
					</view>
					<view class="label-box flexWrapNo" v-if="storeInfo.label_txt.length">
						<view class="label-item" v-for="(item,index) in storeInfo.label_txt.split(',')">{{item}}</view>
					</view>
					<view class="shop-introduce" v-if="storeInfo.blessing_txt">
						{{storeInfo.blessing_txt}}
					</view>
				</view>
				<view class="gn-padd">
					<scroll-view class="gn-box" scroll-x="true" @scroll="scrollClick" show-scrollbar="false">
						<view class="gn-item" @tap="goPage('/moduleA/roadMap')" v-if="position_navigation==1">
							<view class="gn-img">
								<image src="/static/home/gn1.png"></image>
							</view>
							<text>路线图</text>
						</view>
						<view class="gn-item" @tap="showTips()" v-if="tuan_verification_coupon==1">
							<view class="gn-img">
								<image src="/static/home/gn2.png"></image>
							</view>
							<text>验券</text>
						</view>
						<view class="gn-item" @tap="goPage('/moduleA/taskList')">
							<view class="gn-img">
								<image src="/static/home/task-img.png"></image>
							</view>
							<text>挑战</text>
						</view>
						<view class="gn-item" @tap="goPage('/moduleA/openDoor')" v-if="open==1">
							<view class="gn-img">
								<image src="/static/home/openDoor.png"></image>
							</view>
							<text>开门</text>
						</view>
						<!-- <view class="gn-item" @tap="goPage('/moduleA/score')" v-if="contact_customers==1">
							<view class="gn-img">
								<image src="/static/home/score-icon.png"></image>
							</view>
							<text>记分牌</text>
						</view> -->
						<view class="gn-item" @tap="goPage('/moduleA/wifiLink')" v-if="one_click_wifi==1">
							<view class="gn-img">
								<image src="/static/home/gn4.png"></image>
							</view>
							<text>WIFI</text>
						</view>
						<view class="gn-item" @tap="goPage('/moduleA/contactService')" v-if="contact_customers==1">
							<view class="gn-img">
								<image src="/static/home/gn3.png"></image>
							</view>
							<text>客服</text>
						</view>
						<view class="gn-item" @tap="goPage('/moduleA/join')" v-if="i_want_join==1">
							<view class="gn-img">
								<image src="/static/home/gn5.png"></image>
							</view>
							<text>加盟</text>
						</view>
					</scroll-view>
					<view class="scroll-schedule">
						<view class="scroll-child" :style="{left:scrollLeft}"></view>
					</view>
				</view>
				<view class="nav-box flexWrap">
					<view class="nav-item flexWrapNo" :class="{active:currmentIndex==0,disabled:is_have_h8==0}" @tap="changeNav(0)">
						<image src="../static/home/blackball-icon.png"></image>
						<view class="nav-text">中式黑八</view>
					</view>
					<view class="nav-item flexWrapNo" :class="{active:currmentIndex==1,disabled:is_have_jq==0}" @tap="changeNav(1)">
						<image src="../static/home/slk-icon.png"></image>
						<view class="nav-text">美式九球</view>
					</view>
					<view class="nav-item flexWrapNo" :class="{active:currmentIndex==2,disabled:is_have_slk==0}" @tap="changeNav(2)">
						<image src="../static/home/slk-icon.png"></image>
						<view class="nav-text">斯洛克</view>
					</view>
					<view class="nav-item flexWrapNo" :class="{active:currmentIndex==3,disabled:is_have_mj==0}" @tap="changeNav(3)">
						<image src="../static/home/card-icon.png"></image>
						<view class="nav-text">棋牌</view>
					</view>
				</view>
				<view class="billiards-box flexWrap" v-if="billiardsList.length">
					<block v-for="(item,index) in billiardsList" :key='index'>
						<view class="billiards-item flexWarpCenterColumn" @tap="goTable(item)" :class="{busy:item.status==2||item.status==99,repair:item.status==3}" v-if="item.type==1">
							<view class="billiards-info flexWarpCenterColumn" :style="{backgroundImage:'url('+item.desk_img+')'}" v-if="item.desk_img">
								
							</view>
							<view class="billiards-info flexWarpCenterColumn" v-else>
								<view class="billiards-status">{{item.status==1?'开台 / 预约 / 验券':item.status==2||item.status==99?'忙':'暂时无法使用'}}</view>
								<view class="billiards-num">{{item.equipment_name}}</view>
							</view>
							<view class="billiards-btn">
								{{item.status==1?'开台':item.status==2?'可预约：'+item.yuyue+' ':item.status==3?'维护中':'使用中'}}
							</view>
						</view>
						<view class="billiards-item mj flexWarpCenterColumn" @tap="goTable(item)" :class="{mjbusy:item.status==2||item.status==99,mjrepair:item.status==3}" v-else>
							<view class="billiards-info flexWarpCenterColumn" :style="{backgroundImage:'url('+item.desk_img+')'}" v-if="item.desk_img">
								
							</view>
							<view class="billiards-info flexWarpCenterColumn" v-else>
								<view class="billiards-status">{{item.status==1?'开台 / 预约 / 验券':item.status==2||item.status==99?'忙':'暂时无法使用'}}</view>
								<view class="billiards-num">{{item.equipment_name}}</view>
							</view>
							<view class="billiards-btn">
								{{item.status==1?'开台':item.status==2?'可预约：'+item.yuyue+' ':item.status==3?'维护中':'使用中'}}
							</view>
						</view>
					</block>
				</view>
				<view class="empty-box flexWarpCenterColumn" v-if="billiardsList.length==0">
					<image src="/static/empty-img.png" class="empty-image"></image>
					<view class="empty-tips">暂无此类型台桌</view>
				</view>
				<view class="coupon-box" v-if="couponShow">
					<view class="coupon-top">
						<image src="../static/home/couponBox.png"></image>
					</view>
					<view class="coupon-cont">
						<view class="coupon-head">
							{{couponList[0].activity_name||'加载中...'}}
						</view>
						<view class="coupon-padd">
							<view class="coupon-item flexWrap" :class="{one:couponLenth==1,two:couponLenth==2}" v-for="(item,index) in couponList" :key="index" v-if="index<=3">
								<view class="coupon-left">
									<view>{{item.title}}</view>
								</view>
								<view class="coupon-right">
									x{{item.num}}
								</view>
							</view>
						</view>
					</view>
					<view class="receive-btn" @tap="receiveCoupon()">开心收下</view>
				</view>
				<view class="mask-box" v-if="couponShow" @tap="closeCoupon()"></view>
			</view>
		</template>
	</view>
</template>

<script>
	import videoSwiper from '@/moduleA/components/liuliu-video-swiper/liuliu-video-swiper.vue'
	export default {
		components: {
			videoSwiper,
		},
		data() {
			return {
				pageOpc:0,
				lat:"",
				lon:"",
				store_name:"",
				address_str:"",
				time:'13:10',
				billiardsList:[],
				customHeight:{
					height:30,
					top:20
				},
				navigationBarHeight:"",
				navHeight:"",
				iStatusBarHeight:"",
				encryptedData:"",
				iv:"",
				wxCode:"",
				storeInfo:{},
				bannerList:[],
				phoneNumber:"",
				couponShow:false,
				couponList:[],
				couponLenth:0,
				store_id:'',
				position_navigation:0,//位置导航
				tuan_verification_coupon:0,//团购验券
				contact_customers:0,//联系客服
				one_click_wifi:0,//一键wifi
				franchise_consulting:0,//加盟咨询
				i_want_join:0,//我要加盟
				open:0,//开门
				isShowRoute:0,
				shopImg:"",
				scrollLeft:0,
				is_collect:0,
				currmentIndex:0,
				typeList:[1,2,3,4],
				table_type:1,
				is_have_h8:1,
				is_have_jq:1,
				is_have_mj:1,
				is_have_slk:1,
				isShow:false
			};
		},
		onLoad(ops) {
			if(ops&&ops.store_id){
				this.store_id=ops.store_id
				uni.setStorageSync('store_id',this.store_id)
				this.storeDetails();
			}
			// #ifdef MP-WEIXIN
			this.iStatusBarHeight = uni.getSystemInfoSync().statusBarHeight;
			//胶囊高度
			// 获取微信胶囊的位置信息 width,height,top,right,left,bottom
			this.customHeight = wx.getMenuButtonBoundingClientRect()
			 // 导航栏高度(标题栏高度) = 胶囊高度 + (顶部距离 - 状态栏高度) * 2
			this.navigationBarHeight = this.customHeight.height + (this.customHeight.top - this.iStatusBarHeight) * 2
			// 总体高度 = 状态栏高度 + 导航栏高度
			this.navHeight = this.navigationBarHeight + this.iStatusBarHeight
			//#endif
		},
		onShareAppMessage() {
			return {
				path:'/pages/home/index?store_id='+this.store_id
			};
		},
		onShow() {
			this.store_id=uni.getStorageSync('store_id')
			if(this.store_id){
				this.storeDetails();
				this.paymentConfig();
				if(uni.getStorageSync('token')){
					this.getNewCoupon();
				}
			}
		},
		onReady(){
			setTimeout(() => {
				this.pageOpc=1
			}, 100)
		},
		methods:{
			changeNav(index){
				this.currmentIndex=index
				this.table_type=this.typeList[index]
				this.storeDetails();
			},
			scrollClick(e){
				this.scrollLeft=e.detail.scrollLeft/(e.detail.scrollWidth-343)*30+'rpx'
			},
			showCoupon(){
				this.couponShow=true
			},
			closeCoupon(){
				this.couponShow=false
			},
			showTips(){
				this.$tools.showToast('先选择台桌，然后点击顶部"验券开台"')
			},
			collectStore(){
				let type=""
				type=this.is_collect==0?'add':'cancel'
				this.$request.post(this.$api.collectStore, {
					store_id:this.store_id,
					type
				}, {
					token: true
				}).then(res => {
					let {
						data = {}
					} = res;
					if (res.code==1) {
						this.is_collect=type=='add'?1:0
					}
				})
			},
			// 配置
			paymentConfig(){
				this.$request.post(this.$api.paymentConfig, {
					store_id:this.store_id
				}, {}).then(res => {
					let {
						data = {}
					} = res;
					if (res.code==1) {
						if(data){
							
						}else{
							data={
								coupon: 0,
								order_cancellation: 0,
								recharge: 0,
								wechat_payment: 0
							}
						}
						uni.setStorageSync('paymentConfig',data)
					}
				})
			},
			// 店铺详情
			storeDetails(){
				this.$request.post(this.$api.storeDetails, {
					store_id:this.store_id,
					longitude:uni.getStorageSync('longitude')||"106.540541",
					latitude:uni.getStorageSync('latitude')||"29.590991",
					table_type:this.table_type
				}, {}).then(res => {
					let {
						data = {}
					} = res;
					if (res.code==1) {
						this.storeInfo=data
						this.billiardsList=data.equipment_list
						this.bannerList=[]
						if(data.shop_cover_images){
							this.bannerList=data.shop_cover_images.split(',')
							this.shopImg=this.bannerList[0]
							let bannerList=this.bannerList.map(item=>{
								return{
									isVideo:false,
									url:item
								}
							})
							if(data.video_url){
								let bannerItem={
									isVideo:true,
									url:data.video_url
								}
								bannerList.unshift(bannerItem)
							}
							this.bannerList=bannerList
							this.isShow=true
							setTimeout(()=>{
								let mySwiper=this.$refs[`mySwiper`]
								mySwiper.init();
							},500)
						}
						this.phoneNumber=data.customer_service_mobile||""
						this.position_navigation=data.position_navigation||1//位置导航
						this.tuan_verification_coupon=data.tuan_verification_coupon||1//团购验券
						this.contact_customers=data.contact_customers||1//联系客服
						this.one_click_wifi=data.one_click_wifi||1//一键wifi
						this.franchise_consulting=data.franchise_consulting||1//加盟咨询
						this.i_want_join=data.i_want_join||1//我要加盟
						this.open=data.open||1//开门
						this.is_collect=data.is_collect
						this.is_have_h8=data.is_have_h8
						this.is_have_jq=data.is_have_jq
						this.is_have_mj=data.is_have_mj
						this.is_have_slk=data.is_have_slk
						uni.setStorageSync('customerServiceMobile',this.phoneNumber)
						uni.setStorageSync('crowdCode',data.crowd_code)
						uni.setStorageSync('shop_name',data.shop_name)
						if(this.position_navigation==0&&this.tuan_verification_coupon==0&&this.contact_customers==0&&this.one_click_wifi==0&&this.i_want_join==0&&this.open==0){
							this.isShowRoute=0
						}else{
							this.isShowRoute=1
						}
					}
				})
			},
			// 获取新用户优惠券
			getNewCoupon(){
				this.$request.post(this.$api.newCoupon, {
					store_id:this.store_id
				}, {
					token:true
				}).then(res => {
					let {
						data = {}
					} = res;
					uni.hideToast();
					if (res.code==1) {
						for (let i in data) {
							data[i].num = data[i].sum
						}
						this.couponList=data
						this.couponLenth=this.couponList.length
						this.couponShow=true
					}else{
						this.couponShow=false
						uni.hideToast();
					}
				})
			},
			// 领取优惠券
			receiveCoupon(){
				this.$request.post(this.$api.receiveCoupon, {
					coupon:JSON.stringify(this.couponList),
					store_id:this.store_id
				}, {
					token:true
				}).then(res => {
					let {
						data = {}
					} = res;
					if (res.code==1) {
						this.closeCoupon();
						this.$tools.showToast('领取成功')
					}
				})
			},
			goTable(item){
				if(item.status==3){
					this.$tools.showToast('当前桌正在维护中，请选择其他桌台');
					return;
				}
				if(item.status==99){
					this.$tools.showToast('当前桌正在使用中，请选择其他桌台');
					return;
				}
				uni.navigateTo({
					url:"/moduleA/billiardsDetails?equipment_id="+item.id
				})
			},
			// 导航
			navigation() {
				let latitude = this.storeInfo.latitude;
				let longitude =  this.storeInfo.longitude;
				let name = this.storeInfo.shop_name;
				let address = this.storeInfo.location;
				if (!latitude || !longitude || !name) {
					uni.showToast({
						title: '打开地图失败,该地址无法查询到',
						duration: 2000,
						icon: 'none'
					});
					console.log(latitude)
					console.log(longitude)
					console.log(name)
					return;
				}
				uni.openLocation({
					latitude: Number(latitude),
					longitude: Number(longitude),
					name: name,
					address: address,
					fail: res => {
						console.log(res);
						uni.showModal({
							content: '打开地图失败,该地址无法查询到'
						});
					}
				});
			},
			// 拨打电话
			makePhoneCall() {
				let that = this
				if(!that.phoneNumber){
					this.$tools.showToast('暂无客服电话')
					return;
				}
				uni.makePhoneCall({
					phoneNumber:that.phoneNumber
				})
			},
		}
	}
</script>

<style lang="scss">
	.content{
		// padding: 28upx;
	}
	.nav-box {
		overflow-x: scroll;
		margin: 24upx 0;
		padding: 0 28upx;
		.nav-item {
			position: relative;
			font-size: 26upx;
			font-family: PingFang SC;
			font-weight: 400;
			color:#FFFFFF;
			width: 228rpx;
			height: 96rpx;
			line-height: 96rpx;
			border-radius: 48rpx;
			text-align: center;
			border: 3rpx solid #3A3D41;
			flex: none;
			margin-right: 10upx;
			justify-content: center;
			image{
				width: 68upx;
				height: 68upx;
				margin-right: 8upx;
			}
			&:nth-of-type(2){
				image{
					width: 56upx;
					height: 52upx;
				}
			}
			&:nth-of-type(3){
				image{
					width: 56upx;
					height: 52upx;
				}
			}
			&:nth-of-type(4){
				image{
					width: 44upx;
					height: 46upx;
				}
			}
		}
		.disabled{
			opacity: .5;
			background-color: #232428;
		}
		.active {
			color: #FFFFFF;
			font-weight: 400;
			background:#3D46C7;
			border: 3rpx solid #3D46C7;
		}
	}
	.change-box{
		font-size: 28upx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		width: 233upx;
		background: rgba(0,0,0,0.06);
		border: 2px solid rgba(255,255,255,0.251);
		border-radius: 63upx;
		justify-content: center;
		position: fixed;
		z-index: 999;
		left: 20upx;
		.change-icon{
			width: 36upx;
			height: 36upx;
			margin-left: 24upx;
		}
	}
	.banner-box{
		height: 420upx;
		.banner-item{
			height: 100%;
			overflow: hidden;
			.shop-img{
				height: 100%;
			}
		}
	}
	.shop-info{
		margin-top: 12upx;
		padding: 28upx;
		.info-top{
			.shop-img{
				width: 144rpx;
				height: 144rpx;
				border: 4rpx solid #FFFFFF;
				position: relative;
				border-radius: 50%;
				margin-right: 17upx;
				image{
					border-radius: 50%;
				}
				.shop-status{
					font-size: 24upx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
					width: 118rpx;
					height: 48rpx;
					line-height: 48rpx;
					text-align: center;
					background: linear-gradient( 180deg, #4AA22A 0%, #69D037 100%);
					border-radius: 48rpx;
					position: absolute;
					left: 0;
					right: 0;
					margin: auto;
					bottom: -8upx;
				}
				.repair-status{
					background:#fc750d;
				}
			}
			.shop-name-box{
				flex:1;
				.shop-name{
					font-size: 34upx;
					font-family: PingFang SC;
					font-weight: 500;
					line-height: 50upx;
					color: #FFFFFF;
				}
				.opera-box{
					flex: none;
					.opera-icon{
						width: 64upx;
						height: 64upx;
						&:nth-of-type(1){
							margin-right: 20upx;
						}
					}
				}
			}
			.navigation-box{
				font-size: 26upx;
				font-family: PingFang SC;
				font-weight: 500;
				line-height: 36upx;
				color: #FFB726;
				.navigation-icon{
					width: 36upx;
					height: 36upx;
					margin-right: 8upx;
				}
			}
		}
		.address-info{
			font-size: 26upx;
			font-family: PingFang SC;
			font-weight: 400;
			line-height: 34upx;
			color: #DDDDDE;
			margin-top: 14upx;
			align-items: baseline;
			@include ellipsis(1);
		}
		.label-box{
			margin-top: 30upx;
			.label-item{
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 26rpx;
				color: #141414;
				height: 48rpx;
				line-height: 48upx;
				text-align: center;
				border-radius: 8rpx;
				padding: 0 12upx;
				margin-right: 12upx;
				&:nth-of-type(odd){
					background: #C1FFC1;
				}
				&:nth-of-type(even){
					background: #FAFFC1;
				}
			}
		}
		.shop-introduce{
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 26rpx;
			line-height: 40upx;
			color: #FFFFFF;
			@include ellipsis(2);
			margin-top: 17upx;
		}
	}
	.gn-padd{
		padding: 0 28upx;
		position: relative;
	}
	.gn-box{
		background: #232428;
		border-radius: 20upx;
		width: 92%;
		white-space: nowrap;
		padding: 30upx 28upx;
		.gn-item{
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #FFFFFF;
			margin-right: 40upx;
			display: inline-block;
			text-align: center;
			.gn-img{
				width: 96upx;
				height: 96upx;
				margin-bottom: 10upx;
			}
		}
	}
	.scroll-schedule{
		width: 60rpx;
		padding: 0 4upx;
		height: 8rpx;
		background: #4F5053;
		border-radius: 4rpx;
		position: absolute;
		left: 0;
		right: 0;
		bottom: 10upx;
		margin: auto;
		.scroll-child{
			width: 42rpx;
			height: 4rpx;
			background: #FFFFFF;
			border-radius: 4rpx;
			position: absolute;
			top: 0;
			bottom: 0;
			margin: auto;
		}
	}
	.billiards-box{
		flex-wrap: wrap;
		background: #232428;
		border-radius: 20rpx 20rpx 0rpx 0rpx;
		padding: 48upx 32upx;
		min-height: 500upx;
		.billiards-item{
			width: 314upx;
			margin-bottom: 40upx;
			.billiards-info{
				width: 297upx;
				height: 174upx;
				justify-content: center;
				background-image: url('/static/home/idle.png');
				background-repeat: no-repeat;
				background-position: center;
				background-size: 100%;
				position: relative;
				.billiards-status{
					height: 40upx;
					line-height: 40upx;
					text-align: center;
					font-size: 24upx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #fff;
					margin-top: 20upx;
				}
				.billiards-num{
					font-size: 34upx;
					font-family: PingFang SC;
					font-weight: 600;
					line-height: 50upx;
					color: #FFFFFF;
					margin-top: 10upx;
				}
			}
			.billiards-btn{
				width: 297rpx;
				height: 96rpx;
				line-height: 96rpx;
				text-align: center;
				border-radius: 50upx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 30rpx;
				background-color: #464F58;
				color:#fff;
				margin-top: 24upx;
			}
		}
		.mj{
			.billiards-info{
				width: 297upx;
				height: 174upx;
				background-image: url('/static/home/mj-idle.png');
			}
		}
		.busy{
			.billiards-info{
				background-image: url('/static/home/busy.png');
				.billiards-status{
					
				}
			}
			.billiards-btn{
				border: 2upx solid #969696;
				color: #969696;
				background: none;
			}
		}
		.mjbusy{
			.billiards-info{
				background-image: url('/static/home/busy.png');
			}
			.billiards-btn{
				border: 2upx solid #969696;
				color: #969696;
				background: none;
			}
		}
		.repair{
			.billiards-info{
				background-image: url('/static/home/repair.png');
				.billiards-status{
					background:#969696;
				}
			}
			.billiards-btn{
				border: 2upx solid #969696;
				color: #969696;
				background: none;
			}
		}
		.mjrepair{
			.billiards-info{
				background-image: url('/static/home/mj-repair.png');
				.billiards-status{
					background:#969696;
				}
			}
			.billiards-btn{
				border: 2upx solid #969696;
				color: #969696;
				background: none;
			}
		}
	}
	.customerservice-box{
		width: 280upx;
		height: 60upx;
		border: 2upx solid #333333;
		border-radius: 16upx;
		font-size: 26upx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #969696;
		justify-content: center;
		margin:50upx auto;
		.customerservice-icon{
			width: 36upx;
			height: 36upx;
			margin-right: 18upx;
		}
	}
	.mask-box{
		background:rgba(0, 0, 0, .5);
		border-radius: 16upx;
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
	}
	.coupon-box{
		width: 646upx;
		height: 780upx;
		position: fixed;
		top: -30%;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
		z-index: 999;
		.coupon-top{
			height: 430upx;
		}
		.coupon-cont{
			border-radius: 72rpx 72rpx 20rpx 20rpx;
			background: linear-gradient( 180deg, #E6EFFF 0%, #FFFFFF 100%);
			min-height: 500upx;
			padding:24upx;
			margin-top: -66upx;
			position: relative;
			.coupon-head{
				font-family: PingFang SC, PingFang SC;
				font-weight: 600;
				font-size: 36rpx;
				color: #141414;
				text-align: center;
				height: 106upx;
				line-height: 106upx;
			}
			.coupon-padd{
				padding-top: 20upx;
				.coupon-item{
					font-size: 32upx;
					font-family: PingFang SC;
					font-weight: 600;
					color: #FF8A57;
					height: 68upx;
					line-height: 68upx;
					background:rgba(255, 138, 87, .1);
					border-radius: 28upx;
					margin-top: 6upx;
					padding: 0 24upx;
				}
				.coupon-left{
					@include ellipsis(1);
				}
				.coupon-right{
					width: 96rpx;
					height: 96rpx;
					line-height: 96rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 600;
					font-size: 34rpx;
					color: #FFFFFF;
					text-align: center;
					font-style: normal;
					text-transform: none;
					background: #FF8A57;
					border-radius: 50%;
				}
				.one{
					height: 134upx;
					line-height: 134upx;
					// margin-top: 40upx;
				}
				.two{
					height: 98upx;
					line-height: 98upx;
					// margin-top: 20upx;
				}
			}
		}
		.receive-btn{
			height: 144rpx;
			line-height: 144upx;
			background: linear-gradient( 90deg, #4AA22A 0%, #69D037 100%);
			border-radius: 72rpx;
			text-align: center;
			color: #fff;
			font-size: 34upx;
			font-weight: 500;
			margin-top: 14upx;
		}
	}
</style>
